<script setup>
import { 
  reactive, 
  isReactive, 
  toRaw, 
  isReadonly, 
  isProxy,
  ref, 
  isRef, 
  unref
} from 'vue';

import { 
  ElForm, 
  ElFormItem,
  ElInput,
  ElButton
} from 'element-plus';

const original = {
  email: '',
  password: ''
}
console.log( original );
console.log( 'original is reactive:' , isReactive( original ) );
console.log( 'original is readonly:' , isReadonly( original ) );

const user = reactive(original);
console.log( user );
console.log( 'user is reactive:', isReactive( user ) );
console.log( 'user is readonly:', isReadonly( user ) );
console.log( 'user is proxy:', isProxy( user ) );

const raw = toRaw(user);
console.log( raw === original ); // true

const confirm = ref(''); // { value: '' }
console.log( isRef( confirm ) ); // true
console.log( unref( confirm ) );

function register(){
  console.log( user );
  console.log( confirm );
}

setTimeout( () => {
    console.log( original );
    user.email = 'sanfeng@wudang.com';
    user.password = 'hellowudang';
    console.log( original );
}, 5000);
</script>

<template>
  <div>
    <el-form :model="user" label-width="120px">
      <el-form-item label="登录邮箱">
        <el-input v-model="user.email" />
      </el-form-item>
      <el-form-item label="登录密码">
        <el-input v-model="user.password" />
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="confirm" />
      </el-form-item>
      <el-form-item label="">
        <el-button @click="register">注册</el-button>
      </el-form-item>
    </el-form>
    <ul>
        <li>user.email: {{user.email}}</li>
        <li>user.password: {{user.password}}</li>
        <li>confirm: {{confirm}}</li>
    </ul>
  </div>
</template>